<!--
	作者：leeeeyx@hotmail.com
	时间：2017-09-27
	描述：菜品销售
-->
<style>
	.btn-primary:focus, .btn-primary.focus {
	    color: #fff;
	    background-color: #3c8dbc;
	    border-color: #367fa9;
	}
	.caret {
    margin-left: 0px !important;
	}
</style>
<style>
    		body{
    			font-family: "微软雅黑";
    		}
    		.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
			    border: 1px solid #d2d2d2;
			}
    		.go{
    			width: 50px;
            	height: 35px;
            	line-height: normal;
            	background-color: #ddd; 
			    border: none;
			    color: #000000;
			    text-align: center;
			    text-decoration: none;
			    display: inline-block;
    		}
    		.page{
    			width: 35px;
            	height: 35px;
            	line-height: normal;
            	background-color: #ddd; 
			    border: none;
			    color: #000000;
			    text-align: center;
			    text-decoration: none;
			    display: inline-block;
    		}
    		.navNum{
    			padding: 5px;
    			height: 35px;
			    line-height: 22px;
    		}
    		.navbar-nav li{
    			padding: 0px 5px 0px 5px;
    		}
        </style>
        <style >
        	.print{display:none}
        </style>

		<style media="print">
			.print{display:block}
		</style>
        <style type="text/css" media="print"> 
		    .noprint{display:none;} 
		</style>
<meta charset="UTF-8">
<div class="content-wrapper" style="min-height: 901px;">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1 style="text-align:center">
        	菜品销售统计报表
      </h1>
    </section>

    <!-- Main content -->
    <section class="content">
      	<div class="row">
	        <div class="col-md-12">
		        <div class="box">
			        <div class="box-header noprint">
				        <div class='col-md-4'>
							<input type="text" class="form-control" id="datepicker" ng-model="searchDate">
						</div>
				        <div class="col-md-2 btn-group">
						 	<select class="btn btn-default" style="width: 100%;" ng-options="w.window_id as w.name for w in windows" ng-model="searchItem.window">
						 		<option value="">全部档口</option>
						 	</select>
						</div>
						<div class="col-md-2 btn-group">
						 	<select class="btn btn-default" style="width: 100%;" ng-options="c.category_id as c.name for c in category" ng-model="searchItem.category">
						 		<option value="">全部类别</option>
						 	</select>
						</div>
						
						<div class="col-md-2">
						 	<input class="form-control" placeholder="输入菜品名" ng-model="search.itemName"/>
						</div>
						<!--<div class="col-md-1">
						 	<button class="btn btn-default" ng-click="searchSaleList();">查询</button>
						</div>-->
					    <div class="col-md-2 btn-group">
							<div class="btn-group">
							 	<button class="btn btn-default" ng-click="searchSaleList();">查询</button>
							 	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						      		<i class="glyphicon glyphicon-save icon-th"></i> 
						      		<span class="caret"></span>
						      	</button>
						      	<ul class="dropdown-menu" style="padding: 10px 20px 0px 20px;left: auto;right:0;min-width: 150px;">
							        <li style="padding-bottom: 10px;cursor: pointer;" ng-click="download('tb_itemsales','菜品销售统计')"><i class="glyphicon glyphicon-export icon-th pull-left"></i>&nbsp;导出Excel</li>
							        <li style="padding-bottom: 10px;cursor: pointer;" ng-click="outPrint()" ><i class="fa fa-print icon-th pull-left" style="font-size: 16px;"></i>&nbsp;打印</li>
						      	</ul>
					      	</div>	
					      	<div class="btn-group">
					      		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						      		<i class="glyphicon glyphicon-th-list icon-th"></i> 
						      		<span class="caret"></span>
						      	</button>
						      	<ul class="dropdown-menu" style="padding: 10px 20px 0px 20px;left: auto;right:0;min-width: 150px;">
							        <li style="padding-bottom: 10px;cursor: pointer;" ng-repeat="h in heads">
							        	<span>
							        		<input type="checkbox" class="pull-left" ng-model="h.checked" >
							        		<label>{{h.name}}</label>
							        	</span>
							        </li>
						      	</ul>
					      	</div>	
						</div>
			        </div>
		            <div class="box-body table-responsive no-padding" >
		            	<div class="box" style="border: 0px;margin-bottom: 0px;">
					        <div class="box-body no-padding" style="min-height: 407px;">
					         	<table class="table table-striped noprint" show-filter="true" id="tb_itemPreview">
								    <thead>
								    	<tr>
								    		<th style="width: 50px;">序号</th>
								    		<th ng-if="heads[0].checked">产品名称</th>
								    		<th ng-if="heads[1].checked">产品类别</th>
									    	<th ng-click="sortBy('sale_number')" ng-if="heads[2].checked">
									    		产品销量
									    		<i class="fa fa-sort      pull-right" ng-if=" desc == undefined || sort != 'sale_number'"></i>
									    		<i class="fa fa-sort-asc  pull-right" ng-if="!desc && sort =='sale_number'"></i>
									    		<i class="fa fa-sort-desc pull-right" ng-if=" desc && sort =='sale_number'"></i>
									    	</th>
									    	<th ng-click="sortBy('sale_money')" ng-if="heads[3].checked">
									    		产品销售额
									    		<i class="fa fa-sort      pull-right" ng-if=" desc == undefined || sort != 'sale_money'"></i>
									    		<i class="fa fa-sort-asc  pull-right" ng-if="!desc && sort =='sale_money'"></i>
									    		<i class="fa fa-sort-desc pull-right" ng-if=" desc && sort =='sale_money'"></i>
									    	</th>
									    	<th ng-if="heads[4].checked">毛利</th>
									    	<th ng-if="heads[5].checked">毛利率</th>
									    	<th ng-if="heads[6].checked">销售额占比</th>
									    	<th ng-if="heads[7].checked">口味</th>
									    	<th ng-if="heads[8].checked">做法</th>
									    	<th>操作</th>
								    	</tr>
								    	
								    </thead>
								    <tbody>
								    	
									    <tr ng-repeat="item in items |  orderBy | filter : query " repeat-finish>
									    	<td>
									    		{{$index+1+selPage*pageSize-pageSize}}
									    	</td>
									        <td title="产品名称" ng-if="heads[0].checked">
									            {{item.item_name}}
									        </td>
									        <td title="产品类别" ng-if="heads[1].checked">
									            {{item.category_name}}
									        </td>
									        <td title="产品销售" ng-if="heads[2].checked">
									            {{item.sale_number}}
									        </td>
									        <td title="产品销售额" ng-if="heads[3].checked">
									            {{item.sale_money}}
									        </td>
									        <td title="毛利" ng-if="heads[4].checked">
									            {{item.profit}}
									        </td>
									        <td title="毛利率" ng-if="heads[5].checked">
									            {{item.profit_percent}}
									        </td>
									        <td title="销售额占比" ng-if="heads[6].checked">
									            {{item.sale_money_percent}}
									        </td>
									        <td ng-if="heads[7].checked"><span ng-repeat="t in item.taste track by $index">{{t}}<span ng-if="!$last">,</span></span></td>
									    	<td ng-if="heads[8].checked"><span ng-repeat="m in item.do_method track by $index">{{m}}<span ng-if="!$last">,</span></span></td>
									        <td>
									        	<button class="btn btn-info" ng-click="showItemDetail(item)">详情</button>
									        </td>
									    </tr>
								    </tbody>
									<tfoot>
					                	<tr>
					                		<td></td>
					                		<td ng-if="heads[0].checked">合计</td>			                		
					                		<td ng-if="heads[1].checked"></td>
					                		<td ng-if="heads[2].checked">{{sale_number_total}}</td>
					                		<td ng-if="heads[3].checked">{{sale_money_total}}</td>
					                		<td title="毛利" ng-if="heads[4].checked"></td>
									        <td title="毛利率" ng-if="heads[5].checked"></td>
									        <td title="销售额占比" ng-if="heads[6].checked"></td>
									        <td ng-if="heads[7].checked"></td>
									    	<td ng-if="heads[8].checked"></td>
									        <td></td>
					                	</tr>
					                </tfoot>
								</table>
								<table class="table table-striped print" name="forPrint">
								    <thead>
								    	<tr>
								    		<th style="width: 50px;">序号</th>
								    		<th ng-if="heads[0].checked">产品名称</th>
								    		<th ng-if="heads[1].checked">产品类别</th>
									    	<th ng-click="sortBy('sale_number')" ng-if="heads[2].checked">
									    		产品销量
									    	</th>
									    	<th ng-click="sortBy('sale_money')" ng-if="heads[3].checked">
									    		产品销售额
									    	</th>
									    	<th ng-if="heads[4].checked">毛利</th>
									    	<th ng-if="heads[5].checked">毛利率</th>
									    	<th ng-if="heads[6].checked">销售额占比</th>
									    	<th ng-if="heads[7].checked">口味</th>
									    	<th ng-if="heads[8].checked">做法</th>
									    </tr>
								    	
								    </thead>
								    <tbody>
								    	
									    <tr ng-repeat="item in allItem " >
									    	<td>
									    		{{$index+1+selPage*pageSize-pageSize}}
									    	</td>
									        <td title="产品名称" ng-if="heads[0].checked">
									            {{item.item_name}}
									        </td>
									        <td title="产品类别" ng-if="heads[1].checked">
									            {{item.category_name}}
									        </td>
									        <td title="产品销售" ng-if="heads[2].checked">
									            {{item.sale_number}}
									        </td>
									        <td title="产品销售额" ng-if="heads[3].checked">
									            {{item.sale_money}}
									        </td>
									        <td title="毛利" ng-if="heads[4].checked">
									            {{item.profit}}
									        </td>
									        <td title="毛利率" ng-if="heads[5].checked">
									            {{item.profit_percent}}
									        </td>
									        <td title="销售额占比" ng-if="heads[6].checked">
									            {{item.sale_money_percent}}
									        </td>
									        <td ng-if="heads[7].checked"><span ng-repeat="t in item.taste track by $index">{{t}}<span ng-if="!$last">,</span></span></td>
									    	<td ng-if="heads[8].checked"><span ng-repeat="m in item.do_method track by $index">{{m}}<span ng-if="!$last">,</span></span></td>

									    </tr>
								    </tbody>
				
								</table>
								<table class="table download" id="tb_itemsales">
								    <tbody>
								    	<tr>
								    		<td>序号</td>
								    		<td ng-if="heads[0].checked">产品名称</td>
								    		<td ng-if="heads[1].checked">产品类别</td>
								    		<td ng-if="heads[2].checked">产品销量</td>
								    		<td ng-if="heads[3].checked">产品销售额</td>
								    		<td ng-if="heads[4].checked">毛利</td>
								    		<td ng-if="heads[5].checked">毛利率</td>
								    		<td ng-if="heads[6].checked">销售额占比</td>
								    		<td ng-if="heads[7].checked">口味</td>
									    	<td ng-if="heads[8].checked">做法</td>
								    	</tr>
									    <tr ng-repeat="item in allItem">
									    	<td>{{$index+1+selPage*pageSize-pageSize}}</td>
									        <td ng-if="heads[0].checked">{{item.item_name}}</td>
									        <td ng-if="heads[1].checked">{{item.category_name}}</td>
									        <td ng-if="heads[2].checked">{{item.sale_number}}</td>
									        <td ng-if="heads[3].checked">{{item.sale_money}}</td>	
									        <td ng-if="heads[4].checked">{{item.profit}}</td>
									        <td ng-if="heads[5].checked">{{item.profit_percent}}</td>
									        <td ng-if="heads[6].checked">{{item.sale_money_percent}}</td>
									        <td ng-if="heads[7].checked"><span ng-repeat="t in item.taste track by $index">{{t}}<span ng-if="!$last">,</span></span></td>
									    	<td ng-if="heads[8].checked"><span ng-repeat="m in item.do_method track by $index">{{m}}<span ng-if="!$last">,</span></span></td>
									    </tr>
								    </tbody>				
								</table>
					        </div>					        
					        <div class="box-footer noprint">
				                <ul class="nav navbar-nav pull-right">
				                	<li>
				                		每页
				                		<select name="example1_length" aria-controls="example1" class="input-sm" ng-change="change(initial)" ng-model="initial" style="border-radius: 0px;height: 35px;"> 
				            				<option value="10">10</option> 
				            				<option value="25">25</option>
				            				<option value="50">50</option>
				            				<option value="100">100</option>
				            		    </select>
				                	</li>
				                	<li>
				                		<input ng-model="page" style="width: 35px;height: 35px;" type="number">
										<input type="button" style="" value="跳转" ng-click="selectPage(page)" class="go">
				                	</li>
				                	<li>
				                		<div class="navNum">
				                			{{selPage}}/{{pages}}页
				                		</div>
				                		
				                	</li>
				                	<li>
				                		<button type="button" style="" ng-click="Previous()" class="page"><i class="glyphicon glyphicon-chevron-left"></i></button>
				                	</li>
				                	<li>
				                		<button type="button" style="" ng-click="Next()" class="page"><i class="glyphicon glyphicon-chevron-right"></i></button>
				                	</li>
				                </ul>		
					        </div>
				
					  	</div> 
		           </div>
		        </div>
	          	<!-- /.box -->
	        </div>
      	</div>
    </section>
    <!-- /.content -->
  </div>
	
	<!--
    	作者：leeeeyx@hotmail.com
    	时间：2017-09-28
    	描述：详情模态框
    -->
	    <div class="modal fade" tabindex="-1" role="dialog" id="detailModal">
	  		<div class="modal-dialog" role="document" style="width: 1000px">
	    		<div class="modal-content">
	      			<div class="modal-header">
	        			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        			<h4 class="modal-title" style="text-align: center;">{{modelItemName}}</h4>
	      			</div>
			      	<div class="modal-body">
			        	<div class="box" style="box-shadow: none;border: 0px;margin: 0px;">
			        		<div class="box-header">
			        			<div class="form-group">
		        					<div class="col-md-3" style="text-align: center;padding-top: 7px">
		        						<!--class="pull-left" -->
		        						<span ng-click="previousDate()" ng-if ="!index == 0"><i class="glyphicon glyphicon-chevron-left"></i></span>
						        		<span>{{date}}</span>
						        		<!--class="pull-right" -->
						        		<span ng-click="nextDate()" ng-if="index != end"><i class="glyphicon glyphicon-chevron-right"></i></span>
		        					</div>
		        					<div class="col-md-2">
		        						<select class="form-control" ng-model="searchParams.period_id" ng-options="p.period_time_id as p.name for p in periods">
		        							<option value="">选择餐别</option>
		        						</select>
		        					</div>
		        					<div class="col-md-2">
		        						<select class="form-control" ng-model="searchParams.interval">
		        							<option value="30">间隔30分</option>
		        							<option value="60">间隔60分</option>
		        						</select>
		        					</div>
		        					<div class="col-md-2 col-md-offset-3" style="text-align: right;">
		        						<button class="btn btn-default" ng-click="getItemDetail()">查询&nbsp;<i class="fa fa-search"></i></button>
		        					</div>
		        				</div>
							</div>
							<!-- 请求回来的菜品销售详情图表及数据 -->
							<div style="width: 970px;height: 497px;background-color: #ffffff;position: fixed;z-index: 99;" ng-if="noDetail"></div>
			        		<div class="box-body">
	        					<div class="box-header" >
		        					<div class="col-md-3">
		        						<label class="col-sm-3 control-label" style="padding: 12px 0px 0px;">评价：</label>
		        						<div class="col-sm-9" style="padding: 0px;">
					                    	<input id="evaluate" type="number" class="rating"  readonly="readonly">
						                </div>	        						
		        					</div>
		        					<div class="col-md-3">
		        						<label class="col-sm-3 control-label" style="padding: 12px 0px 0px;">售卖：</label>
		        						<div class="col-sm-9" style="padding: 0px;">
					                    	<input id="sold" type="number" class="rating"  readonly="readonly">
						                </div>
		        					</div>
		        					<div class="col-md-3" style="text-align: center;">
		        						<label class="control-label" style="padding: 12px 0px 0px;">销量：{{mockdata.sale_number}}份&nbsp;No.{{mockdata.sale_number_ranking}}</label>
		        					</div>
		        					<div class="col-md-3"  style="text-align: center;">
		        						<label class="control-label" style="padding: 12px 0px 0px;">销售额：{{mockdata.sale_money}}元&nbsp;No.{{mockdata.sale_money_ranking}}</label>
		        					</div>
	        					</div>
	        					<div class="box-body">
	        						<div class="row">
	        							<!-- 折柱图 -->
	        							<div style="width: 600px;float: left;">
	        								<div id="chart" style="width: 600px;height:400px;"></div>
	        							</div>
	        							<!-- 详情参数 -->
	        							<div style="float: right;width: 300px;">
	        								<div class="box" style="border: 0px;">
												<table class="table table-striped">
													<tr >
														<td class="no-border" style="text-align: right;">售卖开始时间:</td>
														<td class="no-border" style="text-align: left;">{{mockdata.sale_start_time}}</td>
													</tr>
													<tr>
														<td class="no-border" style="text-align: right;">售卖结束时间:</td>
														<td class="no-border" style="text-align: left;">{{mockdata.sale_end_time}}</td>
													</tr>
													<tr>
														<td class="no-border" style="text-align: right;">生产数量:</td>
														<td class="no-border" style="text-align: left;">{{mockdata.manufacturing_plan_number}}</td>
													</tr>
													<tr>
														<td class="no-border" style="text-align: right;">出品数量:</td>
														<td class="no-border" style="text-align: left;">{{mockdata.make_number}}</td>
													</tr>
													<tr>
														<td class="no-border" style="text-align: right;">剩菜数量:</td>
														<td class="no-border" style="text-align: left;">{{mockdata.residue_number}}</td>
													</tr>
												</table>
												<h3 style="text-align: center;">黄金搭档TOP3</h3>
												<table class="table table-striped">
													<tr ng-repeat = "p in mockdata.item_together track by $index">
														<td style="width: 35px;" class="no-border">{{$index+1}}</td>
														<td class="no-border" style="width: 110px;">{{p.item_name}}</td>
														<td class="no-border" >{{p.item_together_sale_number}}份</td>
													</tr>
												</table>
          									</div>
	        							</div>
	        						</div>
	        					</div>
	        				</div>
			        	</div>
			      	</div>
			      	<!--<div class="modal-footer">
			        	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			        	<button type="button" class="btn btn-primary">Save changes</button>
			      	</div>-->
	    		</div>
	  		</div>
		</div>
